<!-- 告警中心 -->

<template>
  <el-dialog :title="openType" :visible.sync="dialogVisible" width="35%" :close-on-click-modal="false" :modal="false">
    <el-descriptions :column="2">
      <el-descriptions-item label="告警时间">{{ formatterTime('alarmTime', one) }}</el-descriptions-item>
      <el-descriptions-item label="告警等级">{{ one.alarmLevelName }}</el-descriptions-item>
      <el-descriptions-item label="子系统">{{ one.subSystemName }}</el-descriptions-item>
      <el-descriptions-item label="设备名称">{{ one.subSystemName }}</el-descriptions-item>
      <el-descriptions-item :label="`${CORE.MAP.REGION}名称`"> {{ one.areaName }} </el-descriptions-item>
      <el-descriptions-item label="告警类型">{{ one.alarmTypeName }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1">
      <el-descriptions-item label="告警详情">
        <div v-html="one.alarmDetail"></div>
        <div v-for="item in one.messageAlarmFileDto" :key="item.id">
          <img :src="CORE.image(item.fileUrl)" :style="{ width: '10vh', height: '10vh', marginTop: '1vh' }" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="关联视频" style="align-items: center">
        <i class="el-icon-video-camera" style="font-size: 25px; color: #56f6ff; cursor: pointer"></i>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" style="margin-top: 20px">
      <el-descriptions-item label="处理状态">
        <span v-if="one.alarmResolveState === 1" class="text-yellow-500">未处理</span>
        <span v-else-if="one.alarmResolveState === 2" class="text-green-400">已处理</span>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="处理方式">
        <span v-if="one.dealType === 1">转工单</span>
        <span v-else-if="one.dealType === 2">误报消除</span>
        <span v-else-if="one.dealType === 3">已解决</span>
        <span v-else-if="one.dealType === 4">忽略</span>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="处理人">{{ one.dealUserName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="处理时间">{{ CORE.timeStr(one.dealTime) || '-' }}</el-descriptions-item>
      <el-descriptions-item label="操作信息">{{ one.dealDesc }}</el-descriptions-item>
      <el-descriptions-item label="关联工单">{{ one.dealWorkOrder || '-' }}</el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button type="text">
        <el-dropdown trigger="click">
          <span style="color: #5ad6ff">去操作>></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">
                <!-- <div @click="openModel(scope.row, '新增工单', 'formModal1')">转工单</div> -->
                <div @click="deal({ ...one }, 1)">转工单</div>
              </el-dropdown-item>
              <el-dropdown-item command="2">
                <div @click="openModel(one, '误报消除', 'formModal2')">误报消除</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="deal({ ...one }, 3)">已解决</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="deal({ ...one }, 4)">忽略</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button>
    </span>
    <!-- 误报消除（弹窗） -->
    <form-modal2 ref="formModal2" @refreshDataList="refreshDealType"></form-modal2>
  </el-dialog>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import index from './mixIndex'
import formModal2 from '../FormModal2/index.vue'
// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Detail',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixLoop(), index],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  // ...CORE.components(require.context("../", true, /vue$/)),
  components: { formModal2 },
  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      loop: true, // 循环开关
      LOOP_PERIOD: 600, // 循环周期 (单位秒，默认 10 分钟)
      dialogVisible: false,
      one: {},
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 循环事件 (可覆盖)
     */
    toLoop() {
      //
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
